<template>
    <v-data-table
            :headers="headers"
            :items="desserts"
            :search="search"
            :items-per-page="-1"
            :footer-props="footer"
            class="elevation-1"
            group-by="blueprint"
            show-group-by
    >
        <template v-slot:top>
            <v-toolbar flat color="white">
                <v-toolbar-title>{{ title }}</v-toolbar-title>
                <v-divider class="mx-4" inset vertical></v-divider>
                <v-dialog v-model="dialog" max-width="600px">
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn icon large color="primary" v-bind="attrs" v-on="on"
                        >
                            <v-icon>mdi-database-plus</v-icon>
                        </v-btn
                        >
                    </template>
                    <v-card>
                        <v-card-title>
                            <span class="headline">{{ formTitle }}</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container>
                                <v-row>
                                    <!-- 仿写下面的col -->
                                    <v-col cols="12" sm="6" md="6">
                                        <v-text-field
                                                v-model="editedItem.path"
                                                label="资源路径"
                                                placeholder="/api/v1/cars[/:id]"
                                                hint="请输入/api/v1/ 开头的资源路径"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-text-field
                                                v-model="editedItem.desc"
                                                label="资源描述"
                                                placeholder="[创建|更新|获取|删除]汽车[列表]"
                                                hint="中文描述即可"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-text-field
                                                v-model="editedItem.blueprint"
                                                placeholder="cars"
                                                label="资源分组"
                                                hint="资源所属分组"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12" sm="6" md="6">
                                        <v-select
                                                v-model="editedItem.method"
                                                :items="options"
                                                label="资源方法"
                                                hint="请选择一个REST方法"
                                        ></v-select>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-card-text>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="error" text @click="close">Cancel</v-btn>
                            <v-btn color="success" text @click="save">Save</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-spacer></v-spacer>
                <v-text-field
                        v-model="search"
                        append-icon="mdi-magnify"
                        label="Search"
                        single-line
                        hide-details
                ></v-text-field>
            </v-toolbar>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-icon color="primary" class="mr-2" @click="editItem(item)">
                mdi-pencil
            </v-icon>
            <v-icon color="warning" @click="deleteItem(item)"> mdi-delete</v-icon>
        </template>
        <template v-slot:no-data>
            <v-btn color="primary" @click="initialize">Reset</v-btn>
        </template>
    </v-data-table>
</template>

<script>
    // 引用各自的API
    import {GetListApi, CreateOneApi, UpdateOneApi, RemoveOneApi} from "@/api/resource.js";
    import {mapGetters} from "vuex";

    export default {
        data: () => ({
            dialog: false,
            search: "",
            desserts: [],
            editedIndex: -1,
            editedItem: {},
            options: [],
            // Todo 修改下面三个字段
            // ============================================================================
            title: "资源",
            headers: [
                // 这里写列信息
                {text: "路径", value: "path", sortable: false},
                {text: "描述", value: "desc", sortable: false},
                {text: "蓝图", value: "blueprint", sortable: false},
                {text: "方法", value: "method", sortable: false},
                // 下面为Actions 列
                {text: "Actions", value: "actions", sortable: false},
            ],
            defaultItem: {
                name: "",
                calories: 0,
                fat: 0,
                carbs: 0,
                protein: 0,
            },
            // ============================================================================
        }),
        computed: {
            ...mapGetters("app", ["footer"]),
            formTitle() {
                return this.editedIndex === -1
                    ? "新建" + this.title
                    : "更新" + this.title;
            },
        },

        watch: {
            dialog(val) {
                val || this.close();
            },
        },

        created() {
            this.initialize();
            this.refresh();
        },

        methods: {
            initialize() {
                // Todo 如果Dialog中设计Select,请在此处初始化this.options
                this.options = ["GET", "POST", "DELETE", "PUT", "PATCH"];
            },
            refresh() {
                // Todo 这里从后台请求数据，写入this.desserts
                GetListApi().then((res) => {
                    this.desserts = res.body;
                });
            },

            editItem(item) {
                this.editedIndex = this.desserts.indexOf(item);
                this.editedItem = Object.assign({}, item);
                this.dialog = true;
            },
            close() {
                this.dialog = false;
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem);
                    this.editedIndex = -1;
                });
            },

            //  下面两个方法需要增加相应的后台交互操作
            save() {
                if (this.editedIndex > -1) {
                    //   update
                    // Object.assign(this.desserts[this.editedIndex], this.editedItem);
                    UpdateOneApi(this.editedItem).then(res => {
                        this.$msg.info(res.msg)
                        this.refresh()
                    })
                } else {
                    //   create
                    // this.desserts.push(this.editedItem);
                    CreateOneApi(this.editedItem).then(res => {
                        this.$msg.info(res.msg)
                        this.refresh()
                    })
                }
                this.close();
            },
            deleteItem(item) {
                // const index = this.desserts.indexOf(item);
                confirm("Are you sure you want to delete this item?") &&
                // this.desserts.splice(index, 1);
                RemoveOneApi(item.id).then(res => {
                    this.$msg.info(res.msg)
                    this.refresh()
                })
            },
        },
    };
</script>